<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        /*
        window.onload = function () {
            alert("first");
        }
        window.onload = function () {
            alert("second");
        }
         */
        $(function () {
           var arr = new jQuery();
           // console.info(typeof(arr));
           var d = document.getElementById("one");
           var jq = new jQuery(d);
           var jq2 = $(".two");
           var jq3 = $("<h1>helloworld</h1>");
           /*
           console.info(d);
           console.info(jq[0]);
           console.info(jq2);
           console.info(jq3);
            */
           jq2[0].style.color = "red";
           jq.css({
               "color":"red",
               "border":"1px solid blue",
               "text-decoration":"underline"
           })
        });
        function test() {
            /*
            var s = document.createElement("span");
            var t = document.createTextNode("helloworld");
            s.appendChild(t);
            s.style.color = "red";
            var d = document.getElementById("one");
            d.appendChild(s);
            //<div id="one"><span style="color:red">helloworld</span>第一个div</div>
             */
            $("<span style='color:red'>helloworld</span>").appendTo("#one");
            $("#one").click(function () {
                alert("点击");
            })
        }
    </script>
</head>
<body>
    <div id="one">第一个div</div>
    <div class="two">第二个div</div>
    <input type="button" id="input" value="点击" onclick="test()">
</body>
</html>